<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
  <title>出品排行</title>
  <!-- Bootstrap -->
  <link href="../assets/css/mui.min.css" rel="stylesheet">
  <link href="fonts/iconfont.css" rel="stylesheet">
  <link href="../assets/css/style.css" rel="stylesheet" />
  <link href="../assets/css/boss_content.css" rel="stylesheet" />
</head>

<body>
  <header id="header" class="mui-bar mui-bar-nav">
    <h1 class="mui-title">出品排行</h1>
    <button class="mui-action-back mui-btn mui-btn-blue mui-btn-link mui-btn-nav mui-pull-left">
      <span class="mui-icon mui-icon-left-nav"></span>返回</button>
      <a class="mui-pull-right headerright"><i class="icon iconfont icon-gengduo"></i></a>
    </header>
    <div class="mui-content">
      <div class="aggregate-time-list mui-row kuaibgColor jy_table_list">
        <div class="mui-col-xs-3 aggregate-time-active">日</div>
        <div class="mui-col-xs-3">周</div>
        <div class="mui-col-xs-3">月</div>
        <div class="mui-col-xs-3">年</div>
      </div>
      <div class="dayContent jy_contet_list">
        <div class="aggregate-date">
          <span class="aggregate-date-left"><i class="icon iconfont icon-houdongfangiconfont27"></i></span>
          <span class="aggregate-date-time">2016年12月111日</span>
          <span class="aggregate-date-right"><i class="icon iconfont icon-houdongfangiconfont28"></i></span>
        </div>
        <div class="aggregate-member">
          <div class="aggregate-member-info-cpph">
            <div class="mui-row">
              <div class="mui-col-xs-4 aggregate-member-item-cpph1">
                <span class="cpph-item-title1">酸菜魚</span>
                <div class="cpph-item-body cpph-item-body1">
                  <p>单价:¥<span>3.00</span></p>
                  <p>数量:<span>3.00</span></p> 
                  <p>金额:¥<span>3.00</span></p>                    
                </div>
              </div>

              <div class="mui-col-xs-4 aggregate-member-item-cpph2">
                <span  class="cpph-item-title2">米饭</span>
                <div class="cpph-item-body cpph-item-body2">
                  <p>单价:¥<span>3.00</span></p>
                  <p>数量:<span>3.00</span></p> 
                  <p>金额:¥<span>3.00</span></p>                    
                </div>
              </div>

              <div class="mui-col-xs-4  aggregate-member-item-cpph3">
                <span  class="cpph-item-title3">锅包肉</span>
                <div class="cpph-item-body cpph-item-body3">
                  <p>单价:¥<span>3.00</span></p>
                  <p>数量:<span>3.00</span></p> 
                  <p>金额:¥<span>3.00</span></p>                    
                </div>
              </div>

            </div>
            <!-- mui[row]结束 -->
          </div>
        </div>
        <div class="aggregate-tiaoli">
          <div class="orderXq-caipin-list kuaibgColor mui-row">
            <div class="mui-col-xs-3">菜名</div>
            <div class="mui-col-xs-3">单价(元)</div>
            <div class="mui-col-xs-3">销量(份)</div>
            <div class="mui-col-xs-3">金额(元)</div>
          </div>
          <div class="orderXq-caipin-con">
            <div class="orderXq-caipin-item mui-row">
              <div class="mui-col-xs-3">米饭</div>
              <div class="mui-col-xs-3">22</div>
              <div class="mui-col-xs-3">300</div>
              <div class="mui-col-xs-3">1234</div>
            </div>
            <div class="orderXq-caipin-item mui-row">
              <div class="mui-col-xs-3">米饭</div>
              <div class="mui-col-xs-3">22</div>
              <div class="mui-col-xs-3">300</div>
              <div class="mui-col-xs-3">1234</div>
            </div>
            <div class="orderXq-caipin-item mui-row">
              <div class="mui-col-xs-3">米饭</div>
              <div class="mui-col-xs-3">22</div>
              <div class="mui-col-xs-3">300</div>
              <div class="mui-col-xs-3">1234</div>
            </div>
            <div class="orderXq-caipin-item mui-row">
              <div class="mui-col-xs-3">米饭</div>
              <div class="mui-col-xs-3">22</div>
              <div class="mui-col-xs-3">300</div>
              <div class="mui-col-xs-3">1234</div>
            </div>
          </div>
        </div>
      </div>
      <div class="weekContent jy_contet_list hidden">
        <div class="aggregate-date">
          <span class="aggregate-date-left"><i class="icon iconfont icon-houdongfangiconfont27"></i></span>
          <span class="aggregate-date-time">2016年12月26日</span>
          <span class="aggregate-date-right"><i class="icon iconfont icon-houdongfangiconfont28"></i></span>
        </div>
        <div class="aggregate-member">
          <div class="aggregate-member-info-cpph">
            <div class="mui-row">
              <div class="mui-col-xs-4 aggregate-member-item-cpph1">
                <span class="cpph-item-title1">酸菜魚</span>
                <div class="cpph-item-body cpph-item-body1">
                  <p>单价:¥<span>3.00</span></p>
                  <p>数量:<span>3.00</span></p> 
                  <p>金额:¥<span>3.00</span></p>                    
                </div>
              </div>

              <div class="mui-col-xs-4 aggregate-member-item-cpph2">
                <span  class="cpph-item-title2">米饭</span>
                <div class="cpph-item-body cpph-item-body2">
                  <p>单价:¥<span>3.00</span></p>
                  <p>数量:<span>3.00</span></p> 
                  <p>金额:¥<span>3.00</span></p>                    
                </div>
              </div>

              <div class="mui-col-xs-4  aggregate-member-item-cpph3">
                <span  class="cpph-item-title3">锅包肉</span>
                <div class="cpph-item-body cpph-item-body3">
                  <p>单价:¥<span>3.00</span></p>
                  <p>数量:<span>3.00</span></p> 
                  <p>金额:¥<span>3.00</span></p>                    
                </div>
              </div>

            </div>
            <!-- mui[row]结束 -->
          </div>
        </div>
        <div class="aggregate-tiaoli">
          <div class="orderXq-caipin-list kuaibgColor mui-row">
           <div class="mui-col-xs-3">菜名</div>
           <div class="mui-col-xs-3">单价(元)</div>
           <div class="mui-col-xs-3">销量(份)</div>
           <div class="mui-col-xs-3">金额(元)</div>
         </div>
         <div class="orderXq-caipin-con">
          <div class="orderXq-caipin-item mui-row">
            <div class="mui-col-xs-3">包子</div>
            <div class="mui-col-xs-3">421</div>
            <div class="mui-col-xs-3">32</div>
            <div class="mui-col-xs-3">1234</div>
          </div>
          <div class="orderXq-caipin-item mui-row">
            <div class="mui-col-xs-3">包子</div>
            <div class="mui-col-xs-3">421</div>
            <div class="mui-col-xs-3">32</div>
            <div class="mui-col-xs-3">1234</div>
          </div>
          <div class="orderXq-caipin-item mui-row">
            <div class="mui-col-xs-3">包子</div>
            <div class="mui-col-xs-3">421</div>
            <div class="mui-col-xs-3">32</div>
            <div class="mui-col-xs-3">1234</div>
          </div>
          <div class="orderXq-caipin-item mui-row">
            <div class="mui-col-xs-3">包子</div>
            <div class="mui-col-xs-3">421</div>
            <div class="mui-col-xs-3">32</div>
            <div class="mui-col-xs-3">1234</div>
          </div>
        </div>
      </div>
    </div>
    <div class="monthContent jy_contet_list hidden">
      <div class="aggregate-date">
        <span class="aggregate-date-left"><i class="icon iconfont icon-houdongfangiconfont27"></i></span>
        <span class="aggregate-date-time">2016年12月01日</span>
        <span class="aggregate-date-right"><i class="icon iconfont icon-houdongfangiconfont28"></i></span>
      </div>
      <div class="aggregate-member">
          <div class="aggregate-member-info-cpph">
            <div class="mui-row">
              <div class="mui-col-xs-4 aggregate-member-item-cpph1">
                <span class="cpph-item-title1">酸菜魚</span>
                <div class="cpph-item-body cpph-item-body1">
                  <p>单价:¥<span>3.00</span></p>
                  <p>数量:<span>3.00</span></p> 
                  <p>金额:¥<span>3.00</span></p>                    
                </div>
              </div>

              <div class="mui-col-xs-4 aggregate-member-item-cpph2">
                <span  class="cpph-item-title2">米饭</span>
                <div class="cpph-item-body cpph-item-body2">
                  <p>单价:¥<span>3.00</span></p>
                  <p>数量:<span>3.00</span></p> 
                  <p>金额:¥<span>3.00</span></p>                    
                </div>
              </div>

              <div class="mui-col-xs-4  aggregate-member-item-cpph3">
                <span  class="cpph-item-title3">锅包肉</span>
                <div class="cpph-item-body cpph-item-body3">
                  <p>单价:¥<span>3.00</span></p>
                  <p>数量:<span>3.00</span></p> 
                  <p>金额:¥<span>3.00</span></p>                    
                </div>
              </div>

            </div>
            <!-- mui[row]结束 -->
          </div>
        </div>
      <div class="aggregate-tiaoli">
        <div class="orderXq-caipin-list kuaibgColor mui-row">
         <div class="mui-col-xs-3">菜名</div>
         <div class="mui-col-xs-3">单价(元)</div>
         <div class="mui-col-xs-3">销量(份)</div>
         <div class="mui-col-xs-3">金额(元)</div>
       </div>
       <div class="orderXq-caipin-con">
        <div class="orderXq-caipin-item mui-row">
          <div class="mui-col-xs-3">燒餅</div>
          <div class="mui-col-xs-3">421</div>
          <div class="mui-col-xs-3">32</div>
          <div class="mui-col-xs-3">1234</div>
        </div>
        <div class="orderXq-caipin-item mui-row">
          <div class="mui-col-xs-3">燒餅</div>
          <div class="mui-col-xs-3">421</div>
          <div class="mui-col-xs-3">32</div>
          <div class="mui-col-xs-3">1234</div>
        </div>
        <div class="orderXq-caipin-item mui-row">
          <div class="mui-col-xs-3">燒餅</div>
          <div class="mui-col-xs-3">421</div>
          <div class="mui-col-xs-3">32</div>
          <div class="mui-col-xs-3">1234</div>
        </div>
        <div class="orderXq-caipin-item mui-row">
          <div class="mui-col-xs-3">燒餅</div>
          <div class="mui-col-xs-3">421</div>
          <div class="mui-col-xs-3">32</div>
          <div class="mui-col-xs-3">1234</div>
        </div>
      </div>
    </div>
  </div>
  <div class="yearContent jy_contet_list hidden">
    <div class="aggregate-date">
      <span class="aggregate-date-left"><i class="icon iconfont icon-houdongfangiconfont27"></i></span>
      <span class="aggregate-date-time">2016年01月01日</span>
      <span class="aggregate-date-right"><i class="icon iconfont icon-houdongfangiconfont28"></i></span>
    </div>
    <div class="aggregate-member">
          <div class="aggregate-member-info-cpph">
            <div class="mui-row">
              <div class="mui-col-xs-4 aggregate-member-item-cpph1">
                <span class="cpph-item-title1">酸菜魚</span>
                <div class="cpph-item-body cpph-item-body1">
                  <p>单价:¥<span>3.00</span></p>
                  <p>数量:<span>3.00</span></p> 
                  <p>金额:¥<span>3.00</span></p>                    
                </div>
              </div>

              <div class="mui-col-xs-4 aggregate-member-item-cpph2">
                <span  class="cpph-item-title2">米饭</span>
                <div class="cpph-item-body cpph-item-body2">
                  <p>单价:¥<span>3.00</span></p>
                  <p>数量:<span>3.00</span></p> 
                  <p>金额:¥<span>3.00</span></p>                    
                </div>
              </div>

              <div class="mui-col-xs-4  aggregate-member-item-cpph3">
                <span  class="cpph-item-title3">锅包肉</span>
                <div class="cpph-item-body cpph-item-body3">
                  <p>单价:¥<span>3.00</span></p>
                  <p>数量:<span>3.00</span></p> 
                  <p>金额:¥<span>3.00</span></p>                    
                </div>
              </div>

            </div>
            <!-- mui[row]结束 -->
          </div>
        </div>
    <div class="aggregate-tiaoli">
      <div class="orderXq-caipin-list kuaibgColor mui-row">
       <div class="mui-col-xs-3">菜名</div>
       <div class="mui-col-xs-3">单价(元)</div>
       <div class="mui-col-xs-3">销量(份)</div>
       <div class="mui-col-xs-3">金额(元)</div>
     </div>
     <div class="orderXq-caipin-con">
      <div class="orderXq-caipin-item mui-row">
        <div class="mui-col-xs-3">饅頭</div>
        <div class="mui-col-xs-3">421</div>
        <div class="mui-col-xs-3">32</div>
        <div class="mui-col-xs-3">1234</div>
      </div>
      <div class="orderXq-caipin-item mui-row">
        <div class="mui-col-xs-3">饅頭</div>
        <div class="mui-col-xs-3">421</div>
        <div class="mui-col-xs-3">32</div>
        <div class="mui-col-xs-3">1234</div>
      </div>
      <div class="orderXq-caipin-item mui-row">
        <div class="mui-col-xs-3">饅頭</div>
        <div class="mui-col-xs-3">421</div>
        <div class="mui-col-xs-3">32</div>
        <div class="mui-col-xs-3">1234</div>
      </div>
      <div class="orderXq-caipin-item mui-row">
        <div class="mui-col-xs-3">饅頭</div>
        <div class="mui-col-xs-3">421</div>
        <div class="mui-col-xs-3">32</div>
        <div class="mui-col-xs-3">1234</div>
      </div>
    </div>
  </div>
</div>
</div>
<script src="../assets/js/jquery.min.js"></script>
<script src="../assets/js/mui.js"></script>
<script type="text/javascript">
      // table切换选中第几个下面的第几个div显现
      $('.jy_table_list div').on('click', function() {
        var index = $(this).index();
        $('.jy_table_list div').removeClass("aggregate-time-active")
        $('.jy_table_list div').eq(index).addClass("aggregate-time-active")
        $('.jy_contet_list').addClass('hidden')
        $('.jy_contet_list').eq(index).removeClass("hidden")
      })
    </script>
  </body>

  </html>